Code Playground

/* VARIABLES -  START */
/* COLORS  */
/* DIMENSIONS */
/* FONTS */
/* VARIABLES - END */
/* COMMONS - START */
.flex-center, .wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

* {
  box-sizing: border-box;
  margin: 0;
}

/* COMMONS - END */
/* STYLES -  START */
.wrapper {
  background-color: #e0f7fa;
}
.wrapper .button {
  height: 150px;
  width: 150px;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 0px 0px 15px #b4ecf3;
  position: relative;
}
.wrapper .button:active {
  animation: click 0.1s 2 linear alternate;
}
.wrapper .button #small-curve,
.wrapper .button #dark-line {
  stroke: #52d7df;
  stroke-width: 8px;
}
.wrapper .button #large-curve,
.wrapper .button #light-line {
  stroke: #c9f1ef;
  stroke-width: 6px;
}
.wrapper .button #dark-line,
.wrapper .button #light-line {
  opacity: 0;
  stroke-width: 6px;
}
.wrapper .button .mute {
  position: absolute;
  z-index: 10;
  width: 100px;
  height: 100px;
  top: 25px;
  right: 10px;
}
.wrapper .button .curve-small,
.wrapper .button .curve-large {
  position: absolute;
  z-index: 10;
  width: 100px;
  height: 100px;
}
.wrapper .button .curve-small {
  top: 42px;
  right: -10px;
}
.wrapper .button .curve-large {
  top: 15px;
  right: -2px;
}
.wrapper .button .speaker {
  position: absolute;
  height: 70px;
  width: 70px;
  border-radius: 5px;
  border: 25px solid;
  border-color: transparent #52d7df transparent transparent;
  top: 40px;
  left: 5px;
}
.wrapper .button .speaker:after {
  content: "";
  height: 22px;
  width: 15px;
  background-color: #52d7df;
  position: absolute;
  top: 0;
  left: 8px;
  border-radius: 2px 0 0 2px;
}

svg path {
  fill: none;
  stroke-dasharray: 1000;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* STYLES - END */
/* ANIMATIONS - START */
@keyframes click {
  100% {
    transform: scale(0.9, 0.9);
  }
}
@keyframes large-curve {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}
/* ANIMATIONS - END */

gsap.registerPlugin(DrawSVGPlugin);
var tlMute = gsap.timeline({ paused: true});
var tlUnmute = gsap.timeline({paused: true})
var flag = true;

tlMute.to("#large-curve", {
  duration: 0.3,
  drawSVG: "99.9% 100%"
})
  .set("#large-curve", { opacity: 0 })
  .to("#small-curve", { duration: 0.3, drawSVG: "97% 100%" }, "-=0.15")
  .to("#small-curve", { duration: 0.2, y: -40 })
  .set("#dark-line", { drawSVG: "1%", opacity: 1 })
  .set("#small-curve", { opacity: 0 })
  .to("#dark-line", { drawSVG: "100%", duration: 0.2 })
  .set("#light-line", { drawSVG: "1%", opacity: 1, y: 30 })
  .to("#light-line", { y: 0, duration: 0.2 })
  .to("#light-line", { duration: 0.2, drawSVG: "100%" });

tlUnmute.set("#large-curve, #small-curve", {drawSVG: "1%"})
        .to("#large-curve", {drawSVG: "100%", duration: 0.2})
  .to("#small-curve", {duration: 0.2, drawSVG: "100%"}, "-=0.1");

$(".button").click(function () {
  if (flag) {
    tlMute.play();
    tlUnmute.progress(0).pause()
  } else {
    tlMute.progress(0).pause();
    tlUnmute.play();
  }
  flag = !flag;
});

Frontend Forever App